<template>
    <div id="module_manage">
        <el-table ref="module_table" :data="module.tableData"
                  :height="fixedHeight" :max-height="fixedHeight" stripe border highlight-current-row row-key="id"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column v-for="(item,index) in module.tableHead"
                             :label="item.title"
                             :prop="item.value"
                             :width="item.width"
                             align="center"
                             :key="index">
                <template slot-scope="scope">
                    <template v-if="scope.row.status === 'e'">
                        <span v-if="item.value === 'ex'"></span>
                        <el-select v-else-if="item.value === 'type'" v-model="scope.row[item.value]">
                            <el-option v-for="(type,index) in module.moduleType" :key="index" :value="type">{{type}}
                            </el-option>
                        </el-select>
                        <el-select v-else-if="item.value === 'icon'" v-model="scope.row[item.value]" filterable>
                            <el-option v-for="(type,index) in defaultIcon" :key="index" :value="type">
                                <span>
                                    <i :class="type"/>
                                    <span style="float: right">{{type}}</span>
                                </span>
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="scope.row[item.value]"/>
                    </template>
                    <template v-else>
                        <span v-if="item.value === 'icon'">
                            <i :class="scope.row.icon"/>
                        </span>
                        <span v-else>{{scope.row[item.value]}}</span>
                    </template>

                </template>
            </el-table-column>
            <el-table-column width="160" align="center">
                <template slot="header">
                    <span style="cursor: pointer; color: #409EFF;" @click="module_new">新增</span>
                </template>
                <template slot-scope="scope">
                    <el-button type="text" size="mini"
                               @click="module_new(null,scope.row)"
                               v-if="scope.row.type === '分组' && scope.row.status !== 'e'">
                        增加
                    </el-button>
                    <el-button type="text" size="mini" @click="module_chg(scope)">
                        {{scope.row.status === 'e' ? '确定' : '编辑'}}
                    </el-button>
                    <el-button type="text" size="mini" @click="module_del(scope.row)"
                               v-if="scope.row.status !== 'e'">
                        删除
                    </el-button>
                    <el-button type="text" size="mini"
                               v-if="scope.row.type === '模块' && scope.row.status !== 'e'"
                                @click="action_get(scope.row)">
                        功能
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible="action.dlgStatus" title="模块功能" width="70%" top="5vh" @close="action.dlgStatus = false" >
            <el-table ref="action_table" :data="action.tableData"
                  stripe border highlight-current-row row-key="id">
            <el-table-column v-for="(item,index) in action.tableHead"
                             :label="item.title"
                             :prop="item.value"
                             :width="item.width"
                             align="center"
                             :key="index">
                <template slot-scope="scope">
                    <template v-if="scope.row.status === 'e'">
                        <el-select v-if="item.value === 'method'" v-model="scope.row[item.value]">
                            <el-option v-for="(type,index) in action.XdrMethod" :key="index" :value="type">{{type}}
                            </el-option>
                        </el-select>
                        <el-input v-else v-model="scope.row[item.value]"/>
                    </template>
                    <span v-else>{{scope.row[item.value]}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center">
                <template slot="header">
                    <span style="cursor: pointer; color: #409EFF;" @click="action_new">新增</span>
                </template>
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="action_chg(scope)">
                        {{scope.row.status === 'e' ? '确定' : '编辑'}}
                    </el-button>
                    <el-button type="text" size="mini" @click="action_del(scope.row.id)" v-if="scope.row.status !== 'e'">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ModuleManage",
        computed: {
            fixedHeight() {
                return this.$store.state.fixedHeight;
            },
            defaultIcon() {
                return this.$store.state.defaultIcon;
            }
        },
        data() {
            return {
                module: {
                    tableData: [],
                    tableHead: [
                        {
                            title: '',
                            value: 'ex',
                            width: 50
                        },
                        {
                            title: '名称',
                            value: 'name',
                            width: 150
                        },
                        {
                            title: '类型',
                            value: 'type',
                            width: 120
                        },
                        {
                            title: '图标',
                            value: 'icon',
                            width: 120
                        },
                        {
                            title: 'URL',
                            value: 'url',
                            width: 180
                        },
                        {
                            title: '描述',
                            value: 'desc',
                        },
                    ],
                    moduleType: ['分组', '模块'],
                    currentRow: null,
                },
                action: {
                    tableData: [],
                    tableHead: [
                        {
                            title: '名称',
                            value: 'name',
                            width: 150
                        },
                        {
                            title: '标识',
                            value: 'mark',
                            width: 150
                        },
                        {
                            title: 'API',
                            value: 'api',
                            width: 150
                        },
                        {
                            title: '方法',
                            value: 'method',
                            width: 150
                        },
                        {
                            title: '作用域',
                            value: 'scope',
                            width: 150
                        },
                    ],
                    dlgStatus: false,
                    XdrMethod: ['GET','PUT','POST','DELETE']
                }
            }
        },
        methods: {
            module_get() {
                this.api_interface('module.get')
                    .then(res => {
                        if (res.code === '0x00010') {
                            this.module.tableData = res.data;
                        }
                    })
            },
            module_new(event, parent = null) {
                if (parent === null) {
                    this.module.tableData.push({status: 'e'});
                } else {
                    // eslint-disable-next-line no-prototype-builtins
                    if (parent.hasOwnProperty('children')) {
                        parent.children.push({status: 'e', id: -1, pid: parent.id});
                    } else {
                        // parent.children = [{status: 'e'}]
                        this.$set(parent,"children",[{status:'e', id: -1, pid: parent.id}]);
                    }
                    this.$nextTick(function () {
                        this.$refs.module_table.toggleRowExpansion(parent,true);
                    })
                }
            },
            module_chg(scope) {
                if (scope.row.status === 'e') {
                    // 必录值检查
                    // eslint-disable-next-line no-prototype-builtins
                    if (!scope.row.hasOwnProperty('type') || !scope.row.hasOwnProperty('name')) {
                        this.$alert('名称或内容为空', '内容检查');
                        return false;
                    }
                    // eslint-disable-next-line no-prototype-builtins
                    if (scope.row.hasOwnProperty('id') && scope.row.id !== -1) {
                        scope.row.status = 'u';
                        this.api_interface('module.chg',scope.row)
                            .then(res => {
                                if (res.code === '0x00016') {
                                    this.$message.success(res.msg);
                                    this.module_get();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                    } else {
                        scope.row.status = 'i';
                        this.api_interface('module.add',scope.row)
                            .then(res => {
                                if (res.code === '0x00012') {
                                    this.$message.success(res.msg);
                                    this.module_get();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                    }
                } else {
                    scope.row.status = 'e';
                }
            },
            module_del(row) {
                // eslint-disable-next-line no-prototype-builtins
                if (row.hasOwnProperty('children') && row.children.length > 0) {
                    this.$alert('子项不为空', '提示');
                    return false;
                }
                this.api_interface('module.del',{id:row.id})
                    .then(res => {
                        if (res.code === '0x00014') {
                            this.$message.success(res.msg);
                            this.module_get();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
            },
            action_get(module_row) {
                if (module_row !== undefined){
                    this.module.currentRow = module_row;
                }
                this.api_interface('action.get', {module_id: this.module.currentRow.id})
                    .then(res => {
                        if (res.code === '0x00010') {
                            this.action.tableData = res.data;
                        }
                    });
                this.action.dlgStatus = true;
            },
            action_new() {
                this.action.tableData.push({status: 'e', module_id: this.module.currentRow.id});
            },
            action_chg(scope) {
                if (scope.row.status === 'e') {
                    // eslint-disable-next-line no-prototype-builtins
                    if (scope.row.hasOwnProperty('id')) {
                        scope.row.status = 'u';
                        this.api_interface('action.chg',scope.row)
                            .then(res => {
                                if (res.code === '0x00016') {
                                    this.$message.success(res.msg);
                                    this.action_get();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                    } else {
                        scope.row.status = 'i';
                        this.api_interface('action.add',scope.row)
                            .then(res => {
                                if (res.code === '0x00012') {
                                    this.$message.success(res.msg);
                                    this.action_get();
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                    }
                } else {
                    scope.row.status = 'e';
                }
            },
            action_del(row_id) {
                this.api_interface('action.del', {id: row_id})
                    .then(res => {
                        if (res.code === '0x00014') {
                            this.$message.success(res.msg);
                            this.action_get();
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
            }
        },
        created() {
            this.module_get();
        }
    }
</script>

<style scoped>

</style>